<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<meta name="aplus-terminal" content="1">
<meta name="apple-mobile-web-app-title" content="">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta name="format-detection" content="telephone=no, address=no">
<title>聊天</title>
<style type="text/css">
    /*公共样式*/
    body,h1,h2,h3,h4,p,ul,ol,li,form,button,input,textarea,th,td {
        margin:0;
        padding:0
    }
    body,button,input,select,textarea {
        font:12px/1.5 Microsoft YaHei UI Light,tahoma,arial,"\5b8b\4f53";
        *line-height:1.5;
        -ms-overflow-style:scrollbar
    }
    h1,h2,h3,h4{
        font-size:100%
    }
    ul,ol {
        list-style:none
    }
    a {
     text-decoration:none
    }
    a:hover {
        text-decoration:underline
    }
    img {
        border:0
    }
    button,input,select,textarea {
        font-size:100%
    }
    table {
        border-collapse:collapse;
        border-spacing:0
    }

    /*rem*/
    html {
           font-size:62.5%;
     }
     body {
           font:16px/1.5 "microsoft yahei", 'tahoma';
     }
     body .mobile-page {
           font-size: 1.6rem;
     }

     /*浮动*/
    .fl{
        float: left;
     }
    .fr{
        float: right;
     }
    .clearfix:after{
        content: '';
        display: block;
        height: 0;
        clear: both;
        visibility: hidden;
    }

    body{
     background-color: #F5F5F5;
    }
    .mobile-page{
     max-width: 600px;
    }
    .mobile-page .admin-img, .mobile-page .user-img{
     width: 45px;
     height: 45px;
    }
    i.triangle-admin,i.triangle-user{
     width: 0;
         height: 0;
         position: absolute;
         top: 10px;
     display: inline-block;
         border-top: 10px solid transparent;
         border-bottom: 10px solid transparent;
    }
    .mobile-page i.triangle-admin{
     left: 4px;
     border-right: 12px solid #fff;
    }
    .mobile-page i.triangle-user{
     right: 4px;
         border-left: 12px solid #9EEA6A;
    }
    .mobile-page .admin-group, .mobile-page .user-group{
     padding: 6px;
     display: flex;
     display: -webkit-flex;
    }
    .mobile-page .admin-group{
     justify-content: flex-start;
     -webkit-justify-content: flex-start;
    }
    .mobile-page .user-group{
     justify-content: flex-end;
     -webkit-justify-content: flex-end;
    }
    .mobile-page .admin-reply, .mobile-page .user-reply{
     display: inline-block;
     padding: 8px;
     border-radius: 4px;
     background-color: #fff;
     margin:0 15px 12px;
    }
    .mobile-page .admin-reply{
     box-shadow: 0px 0px 2px #ddd;
    }
    .mobile-page .user-reply{
     text-align: left;
     background-color: #9EEA6A;
     box-shadow: 0px 0px 2px #bbb;
    }
    .mobile-page .user-msg, .mobile-page .admin-msg{
     width: 75%;
     position: relative;
    }
    .mobile-page .user-msg{
     text-align: right;
    }
    .chatRecord{
        width: 100%;
        height: 400px;
        border-bottom: 1px solid blue;
        line-height:20px;
        overflow:auto;
        overflow-x:hidden;
    }
</style>
</head>
<body>
<div>
    <div style="float:left;width:47%">
        <p>请选择你是谁：
        <select id="selectName" onchange="stompQueue();">
            <option value="1">请选择</option>
            <option value="Mark">Mark</option>
            <option value="James">James</option>
            <option value="Lison">Lison</option>
            <option value="Peter">Peter</option>
            <option value="King">King</option>
        </select>
        </p>
        <div class="chatWindow">
            <p style="color:darkgrey">群聊：</p>
            <section id="chatRecord1" class="chatRecord">
                <div id="mass_div" class="mobile-page">

                </div>
            </section>
            <section class="sendWindow">
                <textarea name="sendChatValue" id="sendChatValue" class="sendChatValue"></textarea>
                <input type="button" name="sendMessage" id="sendMassMessage" class="sendMessage" onclick="sendMassMessage()" value="发送">
            </section>
        </div>
    </div>


    <div style="float:right; width:47%">
        <p>请选择你要发给谁：
        <select id="selectName2">
            <option value="1">请选择</option>
            <option value="Mark">Mark</option>
            <option value="James">James</option>
            <option value="Lison">Lison</option>
            <option value="Peter">Peter</option>
            <option value="King">King</option>
        </select>
        </p>
        <div class="chatWindow">

            <p style="color:darkgrey">单聊：</p>
            <section id="chatRecord2" class="chatRecord">
                <div id="alone_div"  class="mobile-page">

                </div>
            </section>
            <section class="sendWindow">
                <textarea name="sendChatValue2" id="sendChatValue2" class="sendChatValue"></textarea>
                <input type="button" name="sendMessage" id="sendAloneMessage" class="sendMessage" onclick="sendAloneMessage()" value="发送">
            </section>
        </div>
    </div>
</div>

<!-- 独立JS -->
<script th:src="@{sockjs.min.js}"></script>
<script th:src="@{stomp.min.js}"></script>
<script th:src="@{jquery.js}"></script>
<script th:src="@{wechat_room.js}"></script>
</body>
</html>